<template>
  <div class="container">
    <div class="left">
      <div class="box">
        <img src="https://img2.baidu.com/it/u=2258507004,2911211796&fm=253&fmt=auto&app=138&f=JPEG?w=800&h=400" alt="">
        <div class="avator">
          <img src="http://39.104.22.73:67/readme_img/favicon.ico" alt="">
        </div>
        <div>
          <div class="name">余炜</div>
          <div class="desc">
            <a-tag checkable color="red" :default-checked="true" size="mini">男</a-tag>
            <span style="display: inline-block;width: 5px;"></span>
            <a-tag checkable color="arcoblue" :default-checked="true" size="mini">计算机</a-tag>
          </div>
        </div>

      </div>
      <div class="box1">
        <div class="box2">
          <span class="icon"> <icon-check-circle style="font-size: 25px; color: orange;transform: translateY(2px)"/>
          </span>
          <span style="display: flex;flex-direction: column"> <text>12</text>
              <text style="font-size: 10px;color:#A8ABB2;">已完成</text>
            </span>
        </div>

        <div class="box3">
          <span class="icon"><icon-exclamation-circle style="font-size: 25px;color:#32b90d;transform: translateY(2px)"/>
          </span>
          <span style="display: flex;flex-direction: column"> <text>12</text>
              <text style="font-size: 10px;color:#A8ABB2">待完成</text>
            </span>
        </div>
      </div>
    </div>
    <div class="right">
       <a-table :columns="columns" :data="data">
    <template #optional="{ record }">
      <a-button @click="" type = "outline">view</a-button>
    </template>
  </a-table>
    </div>
  </div>
</template>

<script>
import { ref } from 'vue';

export default {
  setup() {
    const show = ref(true)

    const columns = [{
      title: 'Name',
      dataIndex: 'name',
    }, {
      title: 'Salary',
      dataIndex: 'salary',
    }, {
      title: 'Address',
      dataIndex: 'address',
    }, {
      title: 'Email',
      dataIndex: 'email',
    }, {
      title: 'Optional',
      slotName: 'optional'
    }];
    const data = [{
      key: '1',
      name: 'Jane Doe',
      first: 'Jane',
      last: 'Doe',
      salary: 23000,
      address: '32 Park Road, London',
      email: 'jane.doe@example.com'
    }, {
      key: '2',
      name: 'Alisa Ross',
      first: 'Alisa',
      last: 'Ross',
      salary: 25000,
      address: '35 Park Road, London',
      email: 'alisa.ross@example.com'
    }, {
      key: '3',
      name: 'Kevin Sandra',
      first: 'Kevin',
      last: 'Sandra',
      salary: 22000,
      address: '31 Park Road, London',
      email: 'kevin.sandra@example.com'
    }, {
      key: '4',
      name: 'Ed Hellen',
      first: 'Ed',
      last: 'Hellen',
      salary: 17000,
      address: '42 Park Road, London',
      email: 'ed.hellen@example.com'
    }, {
      key: '5',
      name: 'William Smith',
      first: 'William',
      last: 'Smith',
      salary: 27000,
      address: '62 Park Road, London',
      email: 'william.smith@example.com'
    }];

    return {
      columns,
      data,
      show
    }
  },
}
</script>
<style scoped lang="less">
.container {
  display: flex;
  justify-content: space-between;
  padding: 20px;

  .left {
    width: 200px;
    transform: translateX(-30px);
    margin: 20px;

    .box {
      position: relative;
      width: 200px;
      display: flex;
      flex-direction: column;
      align-items: center;
      background-color: #ffffff;
      height: auto;
      padding-bottom: 20px;
      margin: 10px;

      img {
        width: 200px;
        height: 100px;
      }

      .avator {
        border-radius: 50%;
        overflow: hidden;
        margin: 0 auto;
        position: absolute;
        top: 50px;

        img {
          width: 100px;
          height: 100px;
        }
      }

      .name {
        color: rgb(var(--color-neutral-10));
        font-size: 16px;
        line-height: 25px;
        margin-top: 50px;
        text-align: center;
      }

      .desc {
        font-size: 12px;
        margin: 10px;
      }

    }

    .box1 {
      margin: 10px;
      display: flex;
      justify-content: space-between;
      background-color: #ffffff;
      width: 200px;
      box-sizing: border-box;
      padding: 10px;
      align-items: center;
      border-radius: 10px;

      .icon {
        display: flex;
        width: 30px;
        height: 30px;
        background-color: #F2F3F5;
        justify-content: center;
        border-radius: 50%;
        margin-right: 10px;
      }


      .box2, .box3 {
        display: flex;
      }

    }
  }

  .right {
    flex: 1;
  }

}

</style>